﻿/*
	Max width before this PARTICULAR table gets nasty
	This query will take effect for any screen smaller than 760px
	and also iPads specifically.
	*/
	@media
	only screen and (max-width: 760px),
	(min-device-width: 768px) and (max-device-width: 1024px)  {
        .table-download{
            border-bottom:1px #ccc solid;display: block;
            thead, tbody, th, td, tr {
			    display: block;
		    }
            thead tr {
			    position: absolute;
			    top: -9999px;
			    left: -9999px;
		    }
            
		    tr {
                // border: 1px solid #ccc; 
		    }
            
		    td {
			    /* Behave  like a "row" */
                vertical-align:middle;
			    border: none;
		    //	border-bottom: 1px solid #eee;
			    position: relative;
			    padding-left: 50% !important;
		    }

		    td:before {
			    /* Now like a table header */
			    position: absolute;
			    /* Top/left values mimic padding */
			    top: 6px;
			    left: 6px;
			    width: 45%;
			    padding-right: 10px;
			    white-space: nowrap;
		    }

		    /*
		    Label the data
		    */
		    td:nth-of-type(1):before { content: ""; }
		    td:nth-of-type(2):before { content: "主题"; }
            td:nth-of-type(3):before { content: "分类"; }
		    td:nth-of-type(4):before { content: "文件大小"; }
		    td:nth-of-type(5):before { content: "下载次数"; }
		    td:nth-of-type(6):before { content: "下载密码"; }
		    td:nth-of-type(7):before { content: "下载"; }
        }
	
	

	
	}

	/* Smartphones (portrait and landscape) ----------- */
	@media only screen
	and (min-device-width : 320px)
	and (max-device-width : 480px) {
		body {
			padding: 0;
			margin: 0;
			width:100%; }
		}

	/* iPads (portrait and landscape) ----------- */
	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
		body {
			width: 100%;
		}
	}
